<template>
    <section class="commodity-comment">
        <div>
            <div v-for="(i,key) in evaluate" :key="key">
                <div class="comment-user">
                    <ul>
                        <li><img src="../../assets/meirong1.jpg" alt=""></li>
                        <li>{{i.username}}</li>
                        <li><img src="../../assets/nvshen.png" alt=""></li>
                    </ul>
                </div>
                <div class="comment-right">
                    <div class="comment-croce">
                        <Rate disabled  v-model="i.num" />
                        <span>描述相符度:{{i.describe}}分</span>
                        <span>物流服务:{{i.logistics}}分</span>
                        <span>卖家服务:{{i.service}}分</span>
                        <span>2018-07-18</span>
                        <span>来自粉红平台</span>
                    </div>
                    <div class="comment-text">
                        {{i.evaluate}}
                        <span>查看全部>></span>
                    </div>
                    <div class="comment-img clearfix" v-if="img.length>0">
                        <ul>
                            <li><img src="../../assets/meirong1.jpg" alt=""></li>
                            <li><img src="../../assets/meirong1.jpg" alt=""></li>
                            <li><img src="../../assets/meirong1.jpg" alt=""></li>
                            <li><img src="../../assets/meirong1.jpg" alt=""></li>
                            <li><img src="../../assets/meirong1.jpg" alt=""></li>
                        </ul>
                    </div>
                    <div class="comment-zan clearfix">
                        <span>项目：光子嫩肤/果酸/补水</span> <span>￥成交金额：32960元</span>
                        <span>赞（51）</span>
                        <span>收藏（51）</span>
                    </div>
                    <div class="reply">
                        <ul>
                            <li v-for="(y,key) in i.back" :key="key" v-if='key<numtext'>
                                <img  :src= y.picA alt="">
                                <span>{{y.usernameB}}：</span>
                                <p>回复 {{i.username}}：{{y.content}}</p>
                                <span class="time" @click="huifu(i.id,y.touser_id)"><span>{{y.addtime}}</span>回复</span>
                                <div style="clear: both"></div>
                            </li>
                            <li style="padding: 5px 10px" v-if="i.back.length>numtext">还有{{i.back.length-numtext}}条回复<span style="float: none" @click="gengduo(i.back.length)">查看更多</span></li>
                        </ul>
                        <div v-if="i.show == 2">
                            <Input v-model="value" placeholder="Enter something..." style="width: 700px" />
                            <span  @click="fasong(i.id)">发送</span>
                        </div>
                    </div>

                </div>
                <div style="clear: both"></div>
            </div>
        </div>
        <div style="text-align: center">
            <Page :total="100" />
        </div>
    </section>
</template>

<script>
    export default {
        name: "CommodityComment",
        props:['evaluate','sauts'],
        data () {
            return {
                img:[],
                value:'',
                text:'',
                numtext:3,
                textnum:''
            }
        },
        created () {
            let _this = this
            _this.evaluate.forEach(function (i) {
                let num = parseInt((parseInt(i.describe)+parseInt(i.logistics)+parseInt(i.service))/3)
                _this.$set(i,'num',num)
                _this.$set(i,'show', 1);
            })
        },
        methods:{
            fasong (id) {
                let _this = this
                _this.evaluate.forEach(function (i) {
                    if(i.id == id){
                        i.show = false

                    }
                })
                if(_this.sauts == 1){
                    _this.$post('/api/shop/goodEvaluateBack',
                        {
                            token:_this.$token,
                            evaluate_id: id,
                            touser_id: _this.text,
                            content:_this.value
                        },function (res) {
                            _this.$message.success(res.msg);
                        },function (err,errmsg) {
                            _this.$message.error(errmsg);
                        }
                    )
                }else {
                    _this.$post('/api/shop/evaluateBack',
                        {
                            token:_this.$token,
                            evaluate_id: id,
                            touser_id: _this.text,
                            content:_this.value
                        },function (res) {
                            _this.$message.success(res.msg);
                        },function (err,errmsg) {
                            _this.$message.error(errmsg);
                        }
                    )
                }
            },
            huifu (id, yid) {
                this.text = yid
                let _this = this
                _this.evaluate.forEach(function (i) {
                    if(i.id == id){
                        i.show = 2
                    }
                })
            },
            gengduo (length) {
                this.numtext =length
            }

        }
    }
</script>

<style  lang="less">
    @import "../../style/style";
    .commodity-comment{
        /*width: 778px;*/
        margin-left: 25px;

        .ivu-rate-star{
            margin-right: 0;
        }
        .ivu-rate{
            margin-top: -5px;
        }
        .comment-croce{
            >span{
                margin-left: 10px;
                margin-top: 2px;
            }
            >:nth-child(5){
                margin-left: 55px;
            }
        }
        >:first-child>div{
            padding-top: 20px;
            padding-bottom: 20px;
            border-bottom:1px  dashed  #ff7c93 ;
        }
        .comment-user{
            width: 121px;
            height: 100%;
            text-align: center;
            float: left;
            ul{
                >:first-child{
                    img{
                        border-radius: 50%;
                        width: 50px;
                        height: 50px;
                    }
                }
                li{
                    color: #fe546f;
                    font-size: 15px;
                }
            }

        }
        .comment-right{
            width: 750px;
            float: left;
            .comment-text{
                padding-top: 10px;
                color: #333333;
                font-size: 12px;
                font-weight: bold;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;  //这里是在第二行有省略号
                overflow: hidden;
                span{
                    color:@theme-color-dark ;
                    font-weight: normal;
                }
            }
            .comment-img{
                width: 100%;
                padding-top: 5px;
                ul{
                    li{
                        float: left;
                        width: 78px;
                        margin-right: 5px;
                        img{
                            width: 78px;
                            height: 78px;
                        }
                    }
                }
            }
            .comment-zan{
                padding-bottom: 12px;
                padding-top: 8px;
                border-bottom:1px  dashed  #cbcbcb ;
                >span{
                    color: #999999;
                    margin-right: 15px;
                }
                >:nth-child(2){
                    color: @theme-color-dark;
                }
                >:nth-child(3){
                    margin-left: 320px;
                }

            }
            .reply{
                padding-top: 5px;
                li{
                    padding-left: 8px;
                    margin-top: 3px;
                    padding-bottom: 2px;
                    padding-top: 2px;
                    background-color: #f5f5f5;
                    >span{
                        color: #fe546f;
                        font-size: 13px;
                        float: left;
                        margin-left: 10px;
                        padding-top: 3px;
                        span{
                            color: #999999;
                        }
                    }
                    img{
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        float: left;
                    }
                    p{
                        width: 330px;
                        float: left;
                        padding-top: 4px;
                        color: #999999;
                    }
                    .time{
                        float: right;
                        margin-right: 25px;
                        span{
                            margin-right: 50px;
                        }
                    }
                }
                >div{
                    margin-top: 5px;
                    input{
                        border-radius: 0;
                    }
                    >span{
                        background-color: @theme-color-dark;
                        padding: 9.2px;
                        color: white;
                        border-radius:0 5px 5px 0;
                        cursor: pointer;

                    }

                }
            }
        }
        .option {
            .option-btn {
                display: inline-block;
                width: 79px;
                text-align: center;
                height: 32px;
                line-height: 32px;
                font-size: 14px;
                border-radius: 4px;
                background-color: #ff5371;
                border-bottom: 2px solid #f4162d;
                color: #fff;
                cursor: pointer;
                margin-left: 30px;
            }
            >:last-child{
                color: #ff5371;
                margin-left:7px;
                background-color: #eeeeec;
                border-bottom: 2px solid #fdd0d5;
            }
        }
        .text{
            margin-top: 30px;
            p{
                font-size: 14px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #333333;
            }
            textarea{
                width: 100%;
                margin-top: 10px;
            }
            >div{
                padding-top: 20px;
                width: 260px;
                float: right;
                input{
                    margin-right: 5px;
                    margin-top: 3px;
                }
                span{
                    font-size: 12px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #333333;
                    margin-top: -2px;
                    vertical-align: top;
                }
                b{
                    font-size: 12px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #999999;
                    vertical-align: top;
                }
                >:last-child{
                    background-color: #ff5371;
                    border-radius: 4px;
                    font-size: 14px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #ffffff;
                    text-align: center;
                    padding: 10px 13px;
                }
            }
        }
    }
</style>